import './index.css'

import { Button, Card, Col, InputNumber, Modal, Select } from 'antd'
import { useDetaile, useRts } from '@/api/query'
import { useEffect, useState } from 'react'

import { useLocation } from 'react-router-dom'

export default function Index() {
  const local = useLocation()
  const [id, setid] = useState<string | undefined>()
  const { isLoading, data, isError } = useDetaile(id)
  const [status, setStatus] = useState<number | undefined>()
  useEffect(() => {
    if (local.state) {
      setid(local.state)
    }
  }, [local])
  const [open, setOpen] = useState(false)
  const { mutate } = useRts(id, status)
  const showModal = (sta: number) => {
    setStatus(sta)
    setOpen(true)
  }
  const handleOk = () => {
    setOpen(false)
    mutate()
  }

  const handleCancel = () => {
    setOpen(false)
  }
  if (isLoading) {
    return <div>Loding...</div>
  }
  if (isError) {
    return <div>Error...</div>
  }

  return (
    <div>
      <div>
        {' '}
        <Modal
          open={open}
          title="Title"
          onOk={handleOk}
          onCancel={handleCancel}
          footer={(_, { OkBtn, CancelBtn }) => (
            <>
              <CancelBtn />
              <OkBtn />
            </>
          )}
        >
          <p>是否要进行此操作?</p>
        </Modal>
      </div>
      <div>
        <div className="tui">
          <p>退货商品</p>
          {data.map((item) => {
            return (
              <div key={item._id} className="biao">
                <Col span={5}>
                  <Card title="图片" bordered={false} className="nei">
                    <img
                      src={item.productPic}
                      style={{
                        width: '50px',
                        maxWidth: '50px',
                        maxHeight: '50px'
                      }}
                    />
                  </Card>
                </Col>
                <Col span={3}>
                  <Card title="商品名称" bordered={false} className="nei">
                    {item.productName}
                  </Card>
                </Col>
                <Col span={3}>
                  <Card title="价格" bordered={false} className="nei">
                    {item.productRealPrice}
                  </Card>
                </Col>
                <Col span={5}>
                  <Card title="属性" bordered={false} className="nei">
                    <p>颜色:{item.productColor}</p>
                    <p>内存:{item.productSize}</p>
                  </Card>
                </Col>
                <Col span={3}>
                  <Card title="数量" bordered={false} className="nei">
                    {item.productcount}
                  </Card>
                </Col>
                <Col span={5}>
                  <Card title="小计" bordered={false} className="nei">
                    {item.productcount * item.productRealPrice}
                  </Card>
                </Col>
              </div>
            )
          })}
        </div>
        <div className="fu">
          <p>服务单信息</p>
          <div className="fucon">
            <div className="fcon">
              <div className="fncon1">服务单号</div>
              <div className="fncon2">{data[0].id}</div>
            </div>
            <div className="fcon">
              <div className="fncon1">申请状态</div>
              <div className="fncon2">
                {data[0].status
                  ? '待处理'
                  : data[0].status === 2
                    ? '退货中'
                    : data[0].status === 3
                      ? '已完成'
                      : '已拒绝'}
              </div>
            </div>
            <div className="fcon">
              <div className="fncon1">订单编号</div>
              <div className="fncon2">{data[0].orderSn}</div>
            </div>
            <div className="fcon">
              <div className="fncon1">申请时间</div>
              <div className="fncon2">{data[0].createTime}</div>
            </div>
            <div className="fcon">
              <div className="fncon1">用户账号</div>
              <div className="fncon2">{data[0].memberUsername}</div>
            </div>
            <div className="fcon">
              <div className="fncon1">联系人</div>
              <div className="fncon2">{data[0].returnName}</div>
            </div>
            <div className="fcon">
              <div className="fncon1">联系电话</div>
              <div className="fncon2">{data[0].returnPhone}</div>
            </div>
            <div className="fcon">
              <div className="fncon1">退货原因</div>
              <div className="fncon2">{data[0].reason}</div>
            </div>
            <div className="fcon">
              <div className="fncon1">问题描述</div>
              <div className="fncon2">{data[0].description}</div>
            </div>
            <div className="fcon">
              <div className="fncon1">凭证图片</div>
              <div className="fncon2">
                <img
                  src={data[0].productPic}
                  alt=""
                  style={{
                    width: '50px',
                    maxWidth: '50px',
                    maxHeight: '50px'
                  }}
                />
              </div>
            </div>
          </div>
          <div
            className={
              data[0].status == 1 ||
              (data[0].status == 2) | (data[0].status == 3)
                ? 'ding'
                : 'noding'
            }
          >
            <div className="fcon">
              <div className="fncon1">订单金额</div>
              <div className="fncon2">{data[0].orderSn}</div>
            </div>
            <div className="fcon">
              <div className="fncon1">确认退款金额</div>
              <div className="fncon2">
                ￥{' '}
                <InputNumber
                  type="text"
                  value={data[0].orderSn}
                  disabled={
                    (data[0].status == 2) | (data[0].status == 3) ? true : false
                  }
                />
              </div>
            </div>
            <div className="fcon">
              <div className="fncon1">选择收货低点</div>
              <div className="fncon2">
                <Select
                  disabled={
                    (data[0].status == 2) | (data[0].status == 3) ? true : false
                  }
                  defaultValue={data[0].addressName}
                  style={{ width: 120 }}
                  options={[
                    { value: '南京发货点', label: '南京发货点' },
                    { value: '北京发货点', label: '北京发货点' },
                    { value: '深圳发货点', label: '深圳发货点' }
                  ]}
                ></Select>
              </div>
            </div>
            <div className="fcon">
              <div className="fncon1">收货人姓名</div>
              <div className="fncon2">{data[0].returnName}</div>
            </div>
            <div className="fcon">
              <div className="fncon1">所在区域</div>
              <div className="fncon2">{data[0].province}</div>
            </div>
            <div className="fcon">
              <div className="fncon1">详细地址</div>
              <div className="fncon2">{data[0].detailAddress}</div>
            </div>
            <div className="fcon">
              <div className="fncon1">联系电话</div>
              <div className="fncon2">{data[0].phone}</div>
            </div>
          </div>
          <div
            className={
              (data[0].status == 2) |
              (data[0].status == 3) |
              (data[0].status == 4)
                ? 'buding'
                : 'nobuding'
            }
          >
            <div className="fcon">
              <div className="fncon1">处理人员</div>
              <div className="fncon2">{data[0].handleMan}</div>
            </div>
            <div className="fcon">
              <div className="fncon1">处理时间</div>
              <div className="fncon2">{data[0].handleTime}</div>
            </div>
            <div className="fcon">
              <div className="fncon1">处理备注</div>
              <div className="fncon2">{data[0].handleNote}</div>
            </div>
          </div>
          <div
            className={
              (data[0].status == 2) | (data[0].status == 3)
                ? 'buding'
                : 'nobuding'
            }
          >
            <div className="fcon">
              <div className="fncon1">收货人员</div>
              <div className="fncon2">{data[0].receiveMan}</div>
            </div>
            <div className="fcon">
              <div className="fncon1">收货时间</div>
              <div className="fncon2">{data[0].receiveTime}</div>
            </div>
            <div className="fcon">
              <div className="fncon1">收货备注</div>
              <div className="fncon2">{data[0].receiveNote}</div>
            </div>
          </div>
          <div className={data[0].status == 1 ? 'buding' : 'nobuding'}>
            <Button onClick={() => showModal(3)}>确定收货</Button>
            <Button type="primary" onClick={() => showModal(4)} danger>
              拒绝退货
            </Button>
          </div>
          <div className={data[0].status == 2 ? 'buding' : 'nobuding'}>
            <Button onClick={() => showModal(3)}>确定收货</Button>
          </div>
        </div>
      </div>
    </div>
  )
}
